<template>
  <div class="profile-view">
    <el-card class="profile-card">
      <h2>个人中心</h2>
      <div v-if="userStore.userInfo">
        <p><strong>用户名:</strong> {{ userStore.userInfo.username }}</p>
        <p><strong>Email:</strong> {{ userStore.userInfo.email }}</p>

        <el-divider />

        <el-button type="danger" @click="handleLogout" style="width: 100%;">
          退出登录
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useUserStore } from '../store/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  // P5: 调用 Pinia 的 action
  userStore.logout()
  // P5: 跳转到登录页
  router.push('/login')
}
</script>

<style scoped>
.profile-view { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.profile-card { width: 400px; }
</style>